<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Vue自定义指令练习</title>
	<script type="text/javascript" src="js/vue.js"></script>
	<style type="text/css">
		.aa{
			background-color: blue;
			width: 200px;
			height: 200px;
			position: absolute;
			top: 0;
			left: 0;
		}
		.bb{
			background-color: red;
			width: 200px;
			height: 200px;
			position: absolute;
			top: 0;
			right: 0;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="aa" v-drag>
			我是aa
		</div>
		<div class="bb" v-drag>
			我是bb
		</div>
	</div>
	<script type="text/javascript">
		new Vue({
			el:'.container',
			data:{

			},
			directives:{
				drag(el){
					// console.log(this);
					el.onmousedown=function(e){
						var x = e.clientX;
						var y = e.clientY;
						var l = el.offsetLeft;
						var t = el.offsetTop;
						var divX = x-l;
						var divY = y-t;
						// console.log(e.clientX);
						// console.log(el.offsetLeft);
						document.onmousemove = function(e){
							var newX = e.clientX-divX;
							var newY = e.clientY-divY;
							el.style.left = newX+'px';
							el.style.top = newY+'px';

							document.onmouseup = function(e){
								document.onmousedown = null;
								document.onmousemove = null;
							}
						}
					}
				}
			}
		});
	</script>
</body>
</html>